<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Member-Weight-Food-Cal-Page">
    <div class="col-md-12">
      <el-col :span="22" :offset="1" class="custRow clearfix">
        <el-collapse v-model="activeCollapseNames" style="width: 100%">
          <el-collapse-item title="指标说明" name="1">
            <template #title>
              <span>指标说明</span>
              <div style="margin-left: 15px;width: 93%;text-align: right">
                <span ><el-tag type="danger">指标数据数据仅供餐食计算参考。</el-tag></span>
              </div>
            </template>
            <div class="col-md-12">
              <el-row :gutter="20">
                <el-col :span="23" class="clearfix">
                  <el-descriptions title="" :column="descriptions_col" size="mini" border>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-tickets"></i>BMI
                      </template>
                      <el-tag size="small">(体重 / (身高 * 身高))</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-tickets"></i>体脂率
                      </template>
                      <el-tag size="small">1.2*BMI+0.23*年龄-5.4-10.8*性别（男为1，女为0）</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-tickets"></i>肥胖度
                      </template>
                      <ul>
                        <li>
                          <el-tag size="small" type="info">BMI小于18.5 偏瘦</el-tag>
                        </li>
                        <li>
                          <el-tag size="small" type="primary">BMI在18.5-23.9 正常</el-tag>
                        </li>
                        <li>
                          <el-tag size="small" type="warning">BMI在24-27.9 超重</el-tag>
                        </li>
                        <li>
                          <el-tag size="small" type="danger">BMI在28-30 轻度肥胖</el-tag>
                        </li>
                        <li>
                          <el-tag size="small" type="danger">BMI在30-35 中度肥胖</el-tag>
                        </li>
                        <li>
                          <el-tag size="small" type="danger">BMI在35以上 重度肥胖</el-tag>
                        </li>
                      </ul>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item title="会员数据" name="2">
            <template #title>
              <span>会员数据</span>
              <div style="margin-left: 15px;width: 93%;text-align: right">
                <span ><el-tag type="danger">测算数据仅供餐食计算参考，不可做为医学数据依据。</el-tag></span>
              </div>
            </template>
            <!--顶部搜索栏-->
            <div class="col-md-12">
              <el-row :gutter="20">
                <el-col :span="23" class="clearfix">
                  <el-form :inline="true" :model="query">
                    <el-form-item label="关键词">
                      <el-input v-model="query.key" placeholder="会员ID & 名称 & 手机号" size="small"
                                :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" plain @click="handleFetch" size="small">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <!--中部数据表格栏-->
              <el-row :gutter="20">
                <el-col :span="23" class="clearfix">
                  <el-table :data="memList"
                            :cell-style="{padding:'3px'}"
                            :row-style="{height:'30px'}"
                            :height="tableHeight" :key="isIndex" style="width: 100%" v-loading="isLoading" border stripe
                            row-key="id">
                    <el-table-column v-if="isIndex == 1" type="index" label="序号" width="50" fixed></el-table-column>
                    <el-table-column prop="member_sno" label="会员编号" width="110" fixed></el-table-column>
                    <el-table-column prop="name" label="姓名" fixed>
                      <template #header>
                        <div style="display: flex;justify-content: left;">
                          姓名<i class="el-icon-info"></i>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="height" label="身高" width="120px">
                      <template v-slot="scope">
                        <el-input v-model="scope.row.height" placeholder="身高" size="small"
                                  :clearable="true"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="weight" label="体重" width="120px">
                      <template v-slot="scope">
                        <el-input v-model="scope.row.weight" placeholder="身高" size="small"
                                  :clearable="true"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="95px">
                      <template v-slot="scope">
                        <el-input v-model="scope.row.sex" placeholder="性别" size="small" :clearable="true"
                                  v-if="false"></el-input>
                        <el-select v-model="scope.row.sex" placeholder="性别" size="small">
                          <el-option label="请选择性别" value=-1></el-option>
                          <el-option v-for="item in sex_options" v-bind:key="item.value" :data="item"
                                     :label="item.label"
                                     :value=item.value></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="95px">
                      <template v-slot="scope">
                        <el-input v-model="scope.row.age" placeholder="身高" size="small" :clearable="true"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="bmi" label="BMI指数"></el-table-column>
                    <el-table-column prop="bodyFatRat" label="体脂率"></el-table-column>
                    <el-table-column prop="bodyFatRat" label="肥胖度" width="80px">
                      <template v-slot="scope">
                        <el-tag :type="scope.row.bodyFatRatTag">{{ scope.row.bodyFatRatLabel }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="heatgap" label="热量缺口" width="80px"></el-table-column>
                    <el-table-column prop="status" label="帐号状态" width="80px">
                      <template v-slot="scope">
                        <el-tag type="warning" v-if="scope.row.status=='MEM-002'" plain size="small">待激活</el-tag>
                        <el-tag type="success" v-if="scope.row.status=='MEM-001'" plain size="small">启用</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" :width="optCulWidth">
                      <template v-slot="scope">
                        <el-button type="primary" plain size="small" @click="openDraw(scope.row)" :disabled="scope.row.close">
                          计算
                        </el-button>
                        <el-dropdown style="margin-left: 10px">
                          <el-button type="success" plain size="small">
                            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                          </el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="openHeatGapDialog(scope.row)">设置热量缺口
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="handleChgBMIRat(scope.row)">更新体征数据</el-dropdown-item>
                            <el-dropdown-item @click.native="handleHisData(scope.row)">趋势变化</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="23" class="custRow clearfix">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :pager-count=5
                      :page-sizes="[20, 50, 100]"
                      :page-size="query.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :page-count=10
                      :total="query.total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </div>
    <div>
      <el-drawer title="食材计算详细" :visible.sync="isInfoDrawerShow" :with-header="false" :size="drawerWidth">
        <MemberWeightCalDrawer :drawId="memId" @fMethod="closeInfoDraw"></MemberWeightCalDrawer>
      </el-drawer>
    </div>
    <div>
      <el-drawer title="趋势变化" :visible.sync="isHisDrawerShow" :with-header="false" :size="drawerWidth">
        <MemberWeightHisDrawer :drawId="memId" @fMethod="closeHisDraw"></MemberWeightHisDrawer>
      </el-drawer>
    </div>
    <div>
      <el-dialog title="调整热量值" :visible.sync="dialogFormVisible">
        <el-form :model="handleChgHeatGapForm">
          <el-form-item label="原热量缺口值" :label-width="formLabelWidth">
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <span>{{handleChgHeatGapForm.preHeatgap}}</span>
            </el-col>
          </el-form-item>
          <el-form-item label="调整热量缺口值" :label-width="formLabelWidth">
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-input v-model="handleChgHeatGapForm.heatgap" placeholder="调整热量值" size="small" :clearable="true"
                        maxlength="5"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleChgHeatGap">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {drop, exutDayDinnerTot, exutMemDinner, fetch, updateMemHeatGap, updateMemWeight} from "@/api/MemberWeight";
import MemberWeightCalDrawer from '@/views/hcm/MemberWeightDrawer/MemberWeightDrawer.vue'
import MemberWeightHisDrawer from '@/views/hcm/MemberWeightDrawer/MemberWeightHisDrawer.vue'

export default {
  name: "MemberWeightView",
  components: {MemberWeightCalDrawer, MemberWeightHisDrawer},
  data() {
    return {
      isIndex: 1,
      isShow: false,
      isLoading: true,
      dialogFormVisible: false,
      currentPage: 1,
      total: 0,
      optCulWidth: 300,
      formLabelWidth: '120px',
      handleChgHeatGapForm: {
        memberId: 0,
        preHeatgap:0,
        heatgap: 0,
        height: 0,
        weight: 0,
      },
      sex_options: [
        {label: "男", value: "0", key: 0},
        {label: "女", value: "1", key: 1},
      ],
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 650,
      drawerWidth: "1240px",
      memList: [],
      isInfoDrawerShow: false,
      isHisDrawerShow: false,
      memId: '',
      descriptions_col:2,
      activeCollapseNames: ["2"],
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleFetch() {
      this.isLoading = true;
      fetch(this.query).then(res => {
        let _res = eval(res.data);
        // 刷新页面表格
        this.memList = _res.lists;
        // this.currentPage = _res.currentPage;
        this.query.pageSize = _res.pageSize;
        this.query.total = _res.total;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.handleFetch(this.query);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      this.handleFetch(this.query);
    },
    handleDel(row) {
      let param = {"memberId": row.member_id,}
      drop(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleMemExut() {
      exutMemDinner().then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleDayExut() {
      exutDayDinnerTot().then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    openDraw(row) {
      if (row.member_id == undefined) {
        return;
      }
      this.memId = row.member_id;
      this.isInfoDrawerShow = true;
    },
    closeInfoDraw(r) {
      if (r) {
        this.handleFetch();
      }
      this.isInfoDrawerShow = false;
    },
    closeHisDraw(r) {
      if (r) {
        this.isHisDrawerShow = false;
      }
    },
    // 独立设置用户的热量缺口
    handleChgHeatGap() {
      updateMemHeatGap(this.handleChgHeatGapForm).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
          this.dialogFormVisible = false;
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    openHeatGapDialog(row) {
      this.handleChgHeatGapForm.memberId = row.member_id;
      this.handleChgHeatGapForm.preHeatgap = row.heatgap;
      this.handleChgHeatGapForm.heatgap = row.heatgap;
      this.dialogFormVisible = true;
    },
    handleChgBMIRat(row) {
      updateMemWeight({data: row}).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleHisData(row) {
      // alert(JSON.stringify(row));
      if (row.member_id == undefined) {
        return;
      }
      this.memId = row.member_id;
      this.isHisDrawerShow = true;
    },

  },
  created() {
    this.handleFetch();
  },
  mounted() {
  },
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
</style>